<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
    <title>管理公益项目-链上善行</title>
    <link href="common/favicon1.png" rel="shortcut icon" type="image/png">
    <link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="background/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="background/css/demo.css">
    <link rel="stylesheet" href="background/css/style.css">
    <link rel="stylesheet" href="background/css/common.css"/>
    <link rel="stylesheet" href="common/datatable/dataTables.bootstrap4.min.css"/>

    <style>

        .btn:not([disabled]):not(.disabled) {
            cursor: pointer;
            border-width: 0px;
        }
        .btn:not([disabled]):not(.disabled) {
            cursor: pointer;
            border-width: 0px;
        }
        .address-image {
            max-width: 100px; /* 设置地址图片最大宽度 */
        }
        .dialog {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
        }

        .dialog-header {
            padding: 16px 24px;
            font-size: 18px;
            color: #1f2d3d;
            background-color: #f5f7fa;
            border-bottom: 1px solid #ebedf0;
        }

        .dialog-body {
            padding: 24px;
        }

        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            padding: .png(16px 24px 24px);
            border-top: 1px solid #ebedf0;
        }

        .dialog-footer button {
            margin-left: 8px;
        }
        /* 定义自定义提示样式 */
        .custom-tooltip {
            position: relative;
        }

        .custom-tooltip:hover::after {
            content: attr(data-title);
            position: absolute;
            top: calc(100% + 5px);
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            padding: 5px 10px;
            background-color: #333;
            color: #fff;
            border-radius: 4px;
            font-size: 14px;
            z-index: 1;
        }
    </style>
    <style>

        .header {
            flex: 1;
            width: 100%;
            border: 2px dashed royalblue;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .header svg {
            height: 100px;
        }

        .header p {
            text-align: center;
            color: black;
        }

        .footer {
            background-color: rgba(0, 110, 255, 0.075);
            width: 100%;
            height: 40px;
            padding: 8px;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: black;
            border: none;
        }

        .footer svg {
            height: 130%;
            fill: royalblue;
            background-color: rgba(70, 66, 66, 0.103);
            border-radius: 50%;
            padding: 2px;
            cursor: pointer;
            box-shadow: 0 2px 30px rgba(0, 0, 0, 0.205);
        }

        .footer p {
            flex: 1;
            text-align: center;
        }

        #file {
            display: none;
        }
    </style>
    <style>
        .itema{
            margin-top: 10px;
            font-weight: bold;

        }
        .notification-btn {
            border: none;
            background-color: transparent;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);;
        }

        .notification.success {
            background-color: #e1f3d8;
            color: #4caf50;
        }

        .notification.warning {
            background-color: #fffbe6;
            color: #ffca28;
        }

        .notification.info {
            background-color: #e6f7ff;
            color: #2196f3;
        }

        .notification.error {
            background-color: #ffebee;
            color: #f44336;
        }
        .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
            margin-left: 10px;
            position: relative;
            left: -20px;
        }
        .dialog-footer button {
            margin-left: 8px;
            position: relative;
            left: -20px;
        }
        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            padding: .png(16px 24px 24px);
            border-top: 1px solid #ebedf0;
            position: relative;
            top: -10px;
        }
    </style>
    <link rel="stylesheet" href="background/css/elementUi-theme-chalk-index.css">
</head>

<body>
<div id="app">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>

        <div th:replace="commons/admin-bar::navbar(currUri='my-project')"></div>
        <div th:replace="commons/admin-bar::sidebar(currUri='my-project')"></div>
        <div class="main-content">
            <section class="section">
                <h1 class="section-header">
                    <div style="color: #000000;font-family: 'Dancing Script', cursive;">
                        <i class="ion ion-heart"></i>
                        管理公益项目
                    </div>
                    <div class="float-right">
                        <a href="new-project" class="btn btn-primary btn-sm" > 新的公益项目</a>
                    </div>
                </h1>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <!--已发布-->
                                    <table id="example1" class="table table-bordered table-hover display" style="text-align: center">
                                        <thead>
                                        <tr>
                                            <th style="width: 20%">名称</th>
                                            <th style="width: 15%">主题</th>
                                            <th style="width: 10%">赞助</th>
                                            <th style="width: 10%">评论数</th>
                                            <th style="width: 20%">发布时间</th>
                                            <th style="width: 15%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody style="font-size: 13px">
                                        <tr th:each="projectVo:${projectVos}">
                                            <td>
                                                <a th:href="@{project(id=${projectVo.project.id})}" th:text="${projectVo.project.name}"></a>
                                            </td>
                                            <td th:text="${projectVo.project.theme}"></td>
                                            <td th:text="${projectVo.project.sponsor}"></td>
                                            <td th:text="${projectVo.comments}"></td>
                                            <td th:text="${#dates.format(projectVo.project.gmtModified,'yyyy年MM月dd日 HH:mm:ss')}"></td>
                                            <td>
                                                <button th:onclick="openDialog('form',[[${projectVo.project.id}]])" title="设置下一目标" class="btn btn-sm btn-primary" style="border-width: 0px;"><i class="ion ion-flag"></i></button>
                                                <a th:href="@{edit-project(id=${projectVo.project.id})}" title="编辑" class="btn btn-sm btn-success"><i class="ion ion-edit"></i></a>
                                                <button th:onclick="deleteProject([[${projectVo.project.id}]])" title="删除此公益项目" class="btn btn-sm btn-danger"> <i class="ion ion-trash-b"></i></button>
                                                <button th:onclick="openDialog1('table',[[${projectVo.project.name}]])" title="查看资金捐助" class="btn btn-sm btn-info"> <i class="ion ion-monitor"></i></button>
                                                <button th:onclick="openDialog('table',[[${projectVo.project.name}]])" title="查询钱款去向" class="btn btn-sm btn-warning"> <i class="ion ion-search"></i></button>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <thead>
                                        </thead>
                                    </table>
                                </div>

                            </div>
                        </div><!-- end card-->
                    </div>
                </div>

            </section>
        </div>
        <div th:replace="commons/admin-bar::footer"></div>
    </div>
    <div id="table-dialog" class="dialog" style="position: absolute;right: -200px;top: 400px">
        <div class="dialog-header" >
            去向记录
            <button type="button" class="close" aria-label="Close" th:onclick="closeDialog('table')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <section class="section">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="table-responsive">
                                <!--已发布-->
                                <table id="example2" class="table table-bordered table-hover display" style="text-align: center;width: 100%">
                                    <thead>
                                    <tr>
                                        <th style="width: 10%">事件</th>
                                        <th style="width: 10%">支出</th>
                                        <th style="width: 40%">描述</th>
                                        <th style="width: 10%">地址</th>
                                        <th style="width: 30%">时间</th>
                                    </tr>
                                    </thead>
                                    <tbody style="font-size: 13px">
                                    </tbody>
                                    <thead>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div><!-- end card-->
                </div>
            </div>

        </section>
    </div>
    <div id="table-dialog1" class="dialog" style="position: absolute;right: 150px;top: 450px">
        <div class="dialog-header" >
            受赠记录
            <button type="button" class="close" aria-label="Close" th:onclick="closeDialog1('table')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <section class="section">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="table-responsive">
                                <!--已发布-->
                                <table id="example3" class="table table-bordered table-hover display" style="text-align: center;width: 100%">
                                    <thead>
                                    <tr>
                                        <th style="width: 20%">用户名</th>
                                        <th style="width: 20%">捐款金额</th>
                                        <th style="width: 30%">心愿</th>
                                        <th style="width: 30%">捐献时间</th>
                                    </tr>
                                    </thead>
                                    <tbody style="font-size: 13px">
                                    </tbody>
                                    <thead>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div><!-- end card-->
                </div>
            </div>

        </section>
    </div>

    <div id="form-dialog" class="dialog" style="width: 40%">
        <div class="dialog-header">设置进程</div>
        <div class="dialog-body">
            <form>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label" style="padding-right: 0px"><span style="font-weight: bold;font-size: 16px;padding-right: 0px">进程名字</span></label>
                    <div class="col-sm-10" style="padding-left: 0px">
                        <input type="text" class="form-control" id="inputEmail3" v-model="name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label" style="padding-right: 0px"><span style="font-weight: bold;font-size: 16px;padding-right: 0px">进程时间</span></label>
                    <div class="col-sm-10" style="padding-left: 0px">
                        <input type="date" class="form-control" id="inputPassword3" v-model="time">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label" style="padding-right: 0px"><span style="font-weight: bold;font-size: 16px;padding-right: 0px">进程花费</span></label>
                    <div class="col-sm-10" style="padding-left: 0px">
                        <input type="text" class="form-control" id="inputPassword4" v-model="amount">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label" style="padding-right: 0px"><span style="font-weight: bold;font-size: 16px;padding-right: 0px">进程描述</span></label>
                    <div class="col-sm-10" style="padding-left: 0px">
                        <input type="text" class="form-control" id="inputPassword5" v-model="description">
                    </div>
                </div>
               <div class="form-group row">
                   <label for="inputPassword3" class="col-sm-2 col-form-label" style="padding-right: 0px"><span style="font-weight: bold;font-size: 16px;padding-right: 0px">活动地址</span></label>
                   <label for="file" class="footer" style="width: 82%">
                       <svg fill="#000000" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M15.331 6H8.5v20h15V14.154h-8.169z"></path><path d="M18.153 6h-.009v5.342H23.5v-.002z"></path></g></svg>
                       <p>Not selected file</p>
                       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5.16565 10.1534C5.07629 8.99181 5.99473 8 7.15975 8H16.8402C18.0053 8 18.9237 8.9918 18.8344 10.1534L18.142 19.1534C18.0619 20.1954 17.193 21 16.1479 21H7.85206C6.80699 21 5.93811 20.1954 5.85795 19.1534L5.16565 10.1534Z" stroke="#000000" stroke-width="2"></path> <path d="M19.5 5H4.5" stroke="#000000" stroke-width="2" stroke-linecap="round"></path> <path d="M10 3C10 2.44772 10.4477 2 11 2H13C13.5523 2 14 2.44772 14 3V5H10V3Z" stroke="#000000" stroke-width="2"></path> </g></svg>
                   </label>
                   <input type="file" id="file" @change="handleFile">
               </div>
            </form>
        </div>
        <div class="dialog-footer">
            <el-button type="info" onclick="closeDialog('form')">关闭</el-button>
            <el-button type="primary" @click="toSend">提交</el-button>
        </div>
        <button class="notification-btn success" onclick="openSuccess()" style="display: none" id="opt_success">成功</button>
        <button id="error_not" className="notification-btn error" onClick="openError()" style="display: none">错误</button>
    </div>
</div>
<div id="notifications2"></div>
<!-- 新增模态框 description -->
<div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="descriptionModalLabel">详细描述</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="descriptionModalBody"></div>
        </div>
    </div>
</div>
<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/popper.js"></script>
<script src="background/modules/tooltip.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>

<script src="background/modules/chart.min.js"></script>
<script src="background/modules/summernote/summernote-lite.js"></script>

<script src="background/js/scripts.js"></script>
<script src="background/js/custom.js"></script>
<script src="common/datatable/jquery.dataTables.min.js"></script>
<script src="common/datatable/dataTables.bootstrap4.min.js"></script>
<script src="common/js/board.js"></script>
<script>

    function clickUploadDis() {
        $("#fileDis").click();
    }
    // START CODE FOR BASIC DATA TABLE
    $(document).ready(function() {
        $('#example1').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 5 ]}],
            "order": [4, "desc"]
        });
        $('#example2').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            pageLength : 5,
            data: [],
            columns: [
                { data: 'progress', title: '事件' },
                { data: 'amount', title: '支出' },
                {
                    data: 'description',
                    title: '描述',
                    render: function (data, type, row, meta) {
                        const shortDescription = data.length > 6 ? data.substring(0, 6) + '...' : data;

                        // 使用 <span> 元素包裹短描述，并设置 title 属性为完整描述
                        return `<span title="${data}" style="position:relative;margin-bottom: -20px; display: inline-block;">${shortDescription}</span>`;
                    }
                },



                { data: 'address', title: '地址', render: function(data, type, row, meta) {
                        // 返回包含图片链接的HTML元素，并添加点击事件监听器
                        return `<img src="${data}" alt="地址图片" class="address-image" onclick="openFullscreenImage('${data}')">`;
                    } },
                { data: 'time', title: '时间' }
            ],
            // "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 1 ]}],
            // "order": [3, "desc"],
        });
        var lengthMenuSelect = $('#example2_length select');

        // 移除原有的 10、25、50、100 项结果选项
        lengthMenuSelect.find('option[value="10"], option[value="25"], option[value="50"], option[value="100"]').remove();

        // 添加“显示 5 项结果”的选项（若已存在可忽略此步骤）
        lengthMenuSelect.append('<option value="5" selected>5</option>');
        $('#example3').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页", "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            pageLength : 10,
            data: [],
            columns: [
                { data: 'username', title: '用户名' },
                { data: 'amount', title: '捐款金额' },
                { data: 'message', title: '心愿' },
                { data: 'createTime', title: '捐款时间' }
            ],
            // "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 1 ]}],
            // "order": [1, "desc"]
        });
    });

    // 移除原有的 10、25、50、100 项结果选项
    var lengthMenuSelect = $('#example3_length select');
    // 移除原有的 10、25、50、100 项结果选项
    lengthMenuSelect.find('option[value="25"], option[value="50"], option[value="100"]').remove();

    // 添加“显示 5 项结果”的选项（若已存在可忽略此步骤）
    // END CODE FOR BASIC DATA TABLE
    $(document).on('click', '.description-toggle', function(e) {
        e.preventDefault();
        const description = $(this).data('description');

        $('#descriptionModalBody').text(description);
        $('#descriptionModal').modal('show');
    });
    //图像放大代码
    function openFullscreenImage(imageSrc) {
        var fullscreenImage = document.createElement('img');
        fullscreenImage.src = imageSrc;
        fullscreenImage.alt = '全屏图片';
        fullscreenImage.style.width = '100%';
        fullscreenImage.style.height = '100%';
        fullscreenImage.style.objectFit = 'contain';
        var fullscreenContainer = document.createElement('div');
        fullscreenContainer.style.position = 'fixed';
        fullscreenContainer.style.top = '0';
        fullscreenContainer.style.left = '0';
        fullscreenContainer.style.width = '100%';
        fullscreenContainer.style.height = '100%';
        fullscreenContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
        fullscreenContainer.style.zIndex = '9999';
        fullscreenContainer.style.display = 'flex';
        fullscreenContainer.style.justifyContent = 'center';
        fullscreenContainer.style.alignItems = 'center';
        fullscreenContainer.appendChild(fullscreenImage);
        document.body.appendChild(fullscreenContainer);
        fullscreenContainer.addEventListener('click', function() {
            document.body.removeChild(fullscreenContainer);
        });
    }

</script>
<script>
    var p_name;
    if(document.getElementById('name') !== null) {
        document.getElementById('name').addEventListener('input', function () {
            p_name = this.value;
        });
    }
    var d_time;
    if(document.getElementById('time') !== null) {
        document.getElementById('time').addEventListener('input', function () {
            d_time = this.value;
        });
    }
    // 添加change事件监听器
    var d_description;
    if(document.getElementById('description') !== null) {
        document.getElementById('description').addEventListener('input', function () {
            d_description = this.value;
        });
    }


    function SetProgress(){

        const fileInput = document.getElementById('exampleFormControlFile1');
        const file = fileInput.files[0];
        // 获取当前日期和时间
        var currentDate = new Date();


        var year = currentDate.getFullYear();
        var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 注意月份从0开始，需要加1
        var day = ('0' + currentDate.getDate()).slice(-2);
        var hours = ('0' + currentDate.getHours()).slice(-2);
        var minutes = ('0' + currentDate.getMinutes()).slice(-2);
        var seconds = ('0' + currentDate.getSeconds()).slice(-2);

        var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;


        var formdata = new FormData();
        formdata.append("projectId", cur_id);
        formdata.append("amount", 100)
        formdata.append("imgFile", file);
        formdata.append("time", formattedDate);
        formdata.append("description", d_description);
        formdata.append("progress", p_name);
        $.ajax(({
            url : "disburse/insertDisburses",
            type : "post",
            data : formdata,
            processData: true, // 不对 formdata 进行序列化处理
            contentType: false, // 不设置 contentType，让 jQuery 自动设置
            success(resp){
                var element = document.querySelector('#opt_success');
                element.click();
                document.getElementById('form-dialog').style.display = 'none';
            },
            error(resp){
                var element = document.querySelector('#error_not');
                element.click();
            }
        }))
    }
</script>
<script>
    function createNotification(type, title, message) {
        const notificationDiv = document.createElement('div');
        notificationDiv.classList.add('notification', type, 'show');

        const titleElement = document.createElement('strong');
        titleElement.textContent = title;
        notificationDiv.appendChild(titleElement);

        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationDiv.appendChild(messageElement);

        const Container = document.getElementById('notifications2');
        Container.appendChild(notificationDiv);

        setTimeout(() => {
            notificationDiv.classList.remove('show');
            setTimeout(() => {
                Container.removeChild(notificationDiv);
            }, 300);
        }, 2000);
    }

    function openSuccess() {
        createNotification('success', '设置进程成功');
    }

    function openWarning() {
        createNotification('warning', '警告', '这是一条警告的提示消息');
    }

    function openInfo() {
        createNotification('info', '消息', '这是一条消息的提示消息');
    }

    function openError() {
        createNotification('error', '错误', '您输入的信息有错，请重新输入');
    }
</script>
<script src="front/js/vue.js"></script>
<script src="front/js/index.js"></script>
<script>
    var cur_id = 1;
    new Vue({
        el: '#app',
        data: function() {
            return {
                fileList: [],
                name : '',
                time : '',
                amount : '',
                description : '',
                input : '',
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            }
        },
        methods: {

            handleFile(event) {
                this.input = event.target.files[0]
            },
            toSend(){

                //已经实现数值监控
                var currentDate = new Date();
                var year = currentDate.getFullYear();
                var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 注意月份从0开始，需要加1
                var day = ('0' + currentDate.getDate()).slice(-2);
                var hours = ('0' + currentDate.getHours()).slice(-2);
                var minutes = ('0' + currentDate.getMinutes()).slice(-2);
                var seconds = ('0' + currentDate.getSeconds()).slice(-2);
                var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
                var formdata = new FormData();
                formdata.append("projectId", cur_id);
                formdata.append("imgFile", this.input);
                formdata.append("time", formattedDate);
                formdata.append("description", this.description);
                formdata.append("progress", this.name);
                formdata.append("amount", this.amount);
                $.ajax(({
                    url : "disburse/insertDisburses",
                    type : "POST",
                    data : formdata,
                    processData: false, // 不对 formdata 进行序列化处理
                    contentType: false, // 不设置 contentType，让 jQuery 自动设置
                    success(resp){
                        var element = document.querySelector('#opt_success');
                        element.click();
                        document.getElementById('form-dialog').style.display = 'none';
                        closeDialog('form')
                    },
                    error(resp){
                        var element = document.querySelector('#error_not');
                        element.click();
                    }
                }))
            },
        },
        watch :{

        }

    })
    function closeDialog(dialogId) {
        document.getElementById(dialogId + '-dialog').style.display = 'none';
    }
    function closeDialog1(dialogId) {
        document.getElementById(dialogId + '-dialog1').style.display = 'none';
    }
    function openDialog(dialogId,id) {
        this.pro_id = id;
        cur_id = id;
        document.getElementById(dialogId + '-dialog').style.display = 'block';
        $.ajax(({
            url : "disburse/getDisburses",
            type : "GET",
            success(resp){
                data1 = resp.data;
                var data1 = resp.data.filter(function(item) {
                    return item.projectName === id;
                });
                $('#example2').DataTable().clear().rows.add(data1).draw();
            }
        }))
    }
    function openDialog1(dialogId,id) {
        document.getElementById(dialogId + '-dialog1').style.display = 'block';
        cur_id = id;
        $.ajax(({
            url : "donations/getDonationsPage",
            type : "GET",
            success(resp){
                var data2 = resp.data.filter(function(item) {
                    return item.projectName === cur_id;
                });
                $('#example3').DataTable().clear().rows.add(data2).draw();
            }
        }))
    }
</script>
<script>
    const fileInput = document.getElementById('file');

    // 获取<p>元素
    const fileInfo = document.querySelector('.footer p');

    // 监听文件选择事件
    fileInput.addEventListener('change', function() {
        // 获取所选文件
        const selectedFile = fileInput.files[0];

        // 更新<p>元素中的文本为所选文件的名称
        fileInfo.textContent = selectedFile.name;
    });
    const deleteIcon = document.querySelector('.footer svg:last-of-type');

    // 监听删除图标点击事件
    deleteIcon.addEventListener('click', function() {
        // 获取<input>元素
        const fileInput = document.getElementById('file');

        // 重置<input>元素的值，清除所选文件
        fileInput.value = '';

        // 更新<p>元素中的文本为默认文本
        const fileInfo = document.querySelector('.footer p');
        fileInfo.textContent = 'Not selected file';
    });
</script>
<script src="common/js/project.js"></script>
</body>
</html>
